<template>
  <div>
    <div v-if="type === 1">
      <!--加载界面-->
      <div style="padding-top: 40%"></div>
      <van-loading size="48px" vertical="true">加载中...</van-loading>
    </div>
    <div v-else-if="type === 2">
      <!--空界面-->
      <div style="padding-top: 10%"></div>
      <van-empty :description="emptyTip"/>
    </div>
    <div v-else-if="type === 3">
      <!--错误界面-->
      <div style="padding-top: 10%"></div>
      <van-empty image="network" :description="errorTip"/>
    </div>
    <div v-else>
      <slot></slot>
    </div>
  </div>
</template>

<script>

  // import Vue from 'vue'
  import {Empty, Loading} from 'vant'

  Vue.use(Empty)
  Vue.use(Loading)

  let PageType = {
    normal: 0,
    loading: 1,
    empty: 2,
    error: 3,
  }

  export default {
    name: "LoadingView",
    props: {
      data: {
        default: null
      },
      emptyTip: {
        type: String,
        default: "暂无数据"
      },
      errorTip: {
        type: String,
        default: "网络发生错误"
      },
      errorStatus: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      data: function (val) {
        this.typeChoose()
      },
      errorStatus: function (val) {
        this.typeChoose()
      }
    },
    data() {
      return {
        type: PageType.loading,
      }
    },
    computed: {},
    methods: {
      typeChoose() {

        if (this.errorStatus) {
          this.type = PageType.error
          return
        }
        if (this.data === null) {
          this.type = PageType.loading
        } else if (this.isEmpty(this.data)) {
          this.type = PageType.empty
        } else {
          this.type = PageType.normal
        }
      },
      isEmpty(val) {
        if (Object.prototype.toString.call(val) === '[object Array]') {
          return val.length === 0
        } else if (Object.prototype.toString.call(val) === '[object Object]') {
          return Object.keys(val).length === 0
        }
        return false
      },
      showError(errTip) {

        this.errorTip = errTip || '网络发生错误'
        this.type = PageType.error
      }

    }
  }
</script>

<style scoped>

</style>
